<template>
	<el-dialog
	  title="新增彩票"
	  :visible.sync="showAddView"
	  width="40%"
	  :before-close="handleClose">
	  <el-form :model='gameInfo' :rules='rules' ref='gameInfo'>
	  	<table style="width: 95%;" >
	  		<!--第一行的数据-->
	  		<tr>
	  			<td>彩票英文名</td>
	  			<td>
	  				<el-form-item prop='en'>
	  					<el-input v-model='gameInfo.en'></el-input>
	  				</el-form-item>
	  			</td>
	  		</tr>
	  		<!--第二行的数据-->
	  		<tr>
	  			<td>彩票中文名</td>
	  			<td>
	  				<el-form-item prop='cn'>
		  				<el-input v-model='gameInfo.cn'>></el-input>
	  				</el-form-item>
	  			</td>
	  		</tr>
	  		
	  		<!--第三行数据-->
	  		<tr>
	  			<td>icon</td>
	  			<td>
	  				<ul style="display: flex;">
	  					<el-form-item prop='smIcon'>
	  						<label for='smIcon' style="width: 40px;height: 40px;font-size: 12px;" ref='smIcon'><i class="el-icon-plus"></i></label>
	  						<input type="file" name="icon" id="smIcon" title="asdfa" @change='selectFile(40,40,$event)' />
	  					</el-form-item>
	  					<span style="font-size: 14px;">请上传40x40大小的图片</span>
	  				</ul>
	  			</td>
	  		</tr>
	  		
	  		<!--第四行数据-->
	  		<tr>
	  			<td>icons</td>
	  			<td>
	  				<ul style="display: flex;">
	  					<el-form-item prop='bigIcon'>
	  						<label for='bigIcon' style="width:90px;height: 90px;" ref="bigIcon"><i class="el-icon-plus"></i></label>
	  						<input type="file"  id="bigIcon" name="icon" title="asdfa" @change='selectFile(90,90,$event)' />
	  					</el-form-item>
	  				</ul>
	  			</td>
	  		</tr>
	  	</table>	
	  </el-form>
	  
	  <!--按钮的设置-->
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="handleClose">取 消</el-button>
	    <el-button type="primary" @click="addNewGame">确 定</el-button>
	  </span>
	</el-dialog>
</template>

<script>
	import axios from 'axios'
	export default{
		props:['showAddView'],
		data(){
			return {
				uploadFiles:[],
				gameInfo:{smIcon:'',bigIcon:''},
				rules:{
					en:[
						{required:true,message:'请输入彩票的英文名',trigger:'blur'},
						{min:2,message:'最少输入两个字符',trigger:'blur'}
					],
					cn:[
						{required:true,message:'请输入彩票的英文名',trigger:'blur'},
						{min:2,message:'最少输入两个字符',trigger:'blur'}
					],
					smIcon:[
						{required:true,message:'请选择图片',trigger:'change'},
					],
					bigIcon:[
						{required:true,message:'请选择图片',trigger:'change'}
					],
				}
			}
		},
		methods:{
			//页面关闭后执行的函数
			handleClose(){
				//重新创建40x40
				var smIcon = this.$refs.smIcon;
				//重新创建90x90
				var bigIcon = this.$refs.bigIcon;
				//创建十字的字符图标40x40
				smIcon.innerHTML = '<i class="el-icon-plus"></i>';
				//创建十字的字符图标90x90
				bigIcon.innerHTML = '<i class="el-icon-plus"></i>';
				//重置属性			
				this.$refs['gameInfo'].resetFields();
				//用来存放40和90的图片
				this.uploadFiles = [];
				this.$parent.showAddView = false;
				
			},
			//点击按钮的设置
			addNewGame(){
				this.$refs['gameInfo'].validate((valid)=>{
					if(valid){
						//创建一个form表单
						var fd = new FormData();
						//遍历data里面的属性
						for(var i= 0;i<this.uploadFiles.length;i++){
							fd.append('file',this.uploadFiles[i]);
						}
						//把英文名和中文名放入form表单里面
						fd.append('en',this.gameInfo.en);
						fd.append('cn',this.gameInfo.cn);
						//配置请求头
						let config ={
							headers:{'Comtent-Type':'multipart/form-data'}
						};
						
						axios.post(this.$apis.addNewGame,fd,config)
						.then((resp)=>{
							console.log(resp);
							console.log(resp.message)
							
							this.$message({
								message:resp.data.message,
								type:resp.data.success?'success':'danger'
							});
							if(resp.data.success){
								this.$store.dispatch('loadAllGames',{api:this.$apis.allGames})
							}
							//请求添加成功之后重新发起请求,获取彩种的列表
							this.handleClose();
//							this.$parent.showAddView = false;
						}).catch((error)=>{
							//用catch和reject用法一样,但是catch捕捉到的错误会更多
							console.log(error)
						})
					}else{
						console.log('error submit!!');
						return false;
					}
				})
			},
			
			//打开图片旋转和裁剪界面
			selectFile(width,height,event){
				var e = event || window.event;
				let file = e.target.files[0];
				var url = this.getObjectURL(file);
				var image = new Image();
				image.src = url;
				image.onload = ()=>{
					if(image.width != width || image.height != height){
						alert(`请上传尺寸为宽${width},高${height}的图片`)
					}else{
						if(width == 40){
							this.uploadFiles.push(file);
							var smIcon = this.$refs.smIcon;
							smIcon.innerHTML = image.outerHTML;
							this.gameInfo.smIcon = true;
							
						}
						if(width == 90){
							this.uploadFiles.push(file);
							var bigIcon = this.$refs.bigIcon;
							bigIcon.innerHTML = image.outerHTML;
							this.gameInfo.bigIcon = true;
						}
					}
				}
				//文件预览
//				console.log(file);
			},
			
			//取得该文件的url
			getObjectURL(file){
				var url = null;
				if(window.createObjectURL != undefined){
					url = window.createObjectURL(file);
				}else if (window.URL != undefined){
					url = window.URL.createObjectURL(file);
				}else if (window.webkitURL != undefined){
					url = window.webkitURL.createObjectURL(file);
				}
				return url;
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	
		
	td{
		border: 1px solid #D3DCE6;
		text-align: center;
	}
		
	ul{
		margin-top: 10px;
		
	}
	
	.el-input{
		margin-top: 10px;
	}

	label {
      padding: 0 5px;
      font-size: 30px;
      border-radius: 5px;
      color: #333;
      border: 1px dashed #ccc;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    #smIcon,#bigIcon {
      display: none;
      margin-top: 100px;
    }
</style>